/**
 * 入参
 *
 */
import React, { PureComponent } from 'react';
import { DATA_ENTRY, AdvancedSearch, ContentPackage, NoDataC } from '../../../../comps';
import { Row, Col, Pagination, Spin, message } from 'antd';
import PermissionProductCardC from './permissionProductCard';
import { connect } from 'dva';
import myStyle from './myStyle.less';
class TableListC extends PureComponent {
  state = {
    dataSource: undefined,
    total: undefined,
    currentPage: 1,
    numInPage: 20,
    searchValue: undefined, // 查询条件
    isReset: false, // 是否点击了重置
  };
  UNSAFE_componentWillMount() {
    this.searchById();
  }

  // 查询
  searchById = () => {
    const { currentPage, numInPage, searchValue } = this.state;
    const obj = { currentPage, numInPage };
    if (searchValue !== undefined) {
      obj.id = searchValue;
    }

    this.props.dispatch({
      type: 'portfolioDefinitionM/queryPortfolioPage',
      payload: {
        ...obj,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            dataSource: data.dataSource || [],
            total: data.pageInfo ? data.pageInfo.total : undefined,
          });
        } else {
          this.setState({
            dataSource: [],
            total: undefined,
          });
        }
      },
    });
  };
  // 每页条数变化
  onShowSizeChange = (current, pageSize) => {
    if (this.state.isReset) {
      //判断是否点击了重置 点击页码不进行后台查询
      message.warning('查询条件已被重置，请重新查询。');
      return;
    }
    this.setState(
      {
        currentPage: current,
        numInPage: pageSize,
      },
      () => {
        this.searchById();
      },
    );
  };
  //页码变化
  handlePageChange = (current, pageSize) => {
    if (this.state.isReset) {
      //判断是否点击了重置 点击页码不进行后台查询
      message.warning('查询条件已被重置，请重新查询。');
      return;
    }
    this.setState(
      {
        currentPage: current,
        numInPage: pageSize,
      },
      () => {
        this.searchById();
      },
    );
  };
  render() {
    const searchProps = {
      dataSource: [
        {
          dataIndex: 'name',
          title: '产品代码',
          type: DATA_ENTRY.PRODUCTLIST,
          allowClear: true,
          showSearch: true,
        },
      ],
      //点击查询按钮
      onQuery: (e) => {
        this.setState(
          {
            searchValue: e ? e.name : undefined,
            isReset: false,
            currentPage: 1,
            numInPage: this.state.numInPage,
          },
          () => {
            this.searchById();
          },
        );
      },
      onClear: () => {
        //点击重置按钮
        this.setState({
          searchValue: undefined,
          isReset: true,
          numInPage: 20,
        });
      },
    };
    const { dataSource, total, currentPage, numInPage } = this.state;
    return (
      <ContentPackage
        title='组合定义'
        contentHtml={
          <>
            <div style={{ margin: '0 0 20px 10px' }}>
              <AdvancedSearch {...searchProps} />
            </div>
            <Spin spinning={this.props.loading.effects['portfolioDefinitionM/queryPortfolioPage'] == true}>
              {dataSource ? (
                <div className={myStyle.tableList}>
                  <div className={myStyle.cardItem}>
                    {dataSource &&
                      dataSource.map((item, key) => {
                        return (
                          <div
                            key={key}
                            style={{ marginBottom: '20px' }}
                            onClick={() => {
                              this.props.goDetail(item);
                            }}
                          >
                            <PermissionProductCardC productData={item} />
                          </div>
                        );
                      })}
                  </div>

                  <div>
                    <Pagination
                      showQuickJumper
                      showSizeChanger
                      onShowSizeChange={this.onShowSizeChange}
                      total={total}
                      showTotal={(total) => `共计 ${total} 条`}
                      pageSize={numInPage}
                      current={currentPage}
                      onChange={this.handlePageChange}
                    />
                  </div>
                </div>
              ) : (
                <NoDataC />
              )}
            </Spin>
          </>
        }
      />
    );
  }
}
export default connect(({ portfolioDefinitionM, userM: user, loading }) => ({
  portfolioDefinitionM,
  user,
  loading,
}))(TableListC);
